<template>
  <div class="wh_content_all" style="height: 100%; width: 100%;">
    <div class="wh_top_changge">
      <button @click="PreMonth(myDate,false)">
        <i class="el-icon-arrow-left"></i>
      </button>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font style="font-size: 22px; ">{{dateTop}}</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <button @click="NextMonth(myDate,false)">
        <i class="el-icon-arrow-right"></i>
      </button>
    </div>
    <div class="wh_weekday_content" style="height: 40px;">
      <div class="wh_content_item" v-for="tag in textTop" style="text-align: center; line-height: 40px;  box-sizing: border-box;">
        {{tag}}
      </div>
    </div>
    <div class="wh_content" style="">
      <div v-for="(item,index) in list" @click="clickDay(item,index)" v-bind:class="[{wh_content_item: true},{ wh_isMark: item.isMark},{wh_other_dayhide:item.otherMonth!=='nowMonth'},{wh_want_dayhide:item.dayHide},{wh_isToday:item.isToday},{wh_chose_day:item.chooseDay},setClass(item)]">
        <div class="wh_day_title">{{item.id}}</div>
        <div v-if="dateMap['' + item.date]" v-for="(subItem, subIndex) in dateMap['' + item.date]" class="wh_item_date_attachment">
          <span v-if="subIndex==0" class="wh-badge-status-dot wh-badge-status-red"></span>
          <span v-if="subIndex==1" class="wh-badge-status-dot wh-badge-status-green"></span>
          <span v-if="subIndex==2" class="wh-badge-status-dot wh-badge-status-orange"></span>
          <span v-if="subIndex==3" class="wh-badge-status-dot wh-badge-status-gray"></span>
          
          <font v-if="subItem.style" :style="subItem.style">{{subItem.label}}</font>
          <font v-else>{{subItem.label}}</font>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import timeUtil from "./calendar";
export default {
  name: 'ex-calendar',
  data() {
    return {
      myDate: [],
      list: [],
      historyChose: [],
      dateTop: "",

      dateMap: {
      }
    };
  },
  props: {
    markDate: {
      type: Array,
      default: () => []
    },
    markDateMore: {
      type: Array,
      default: () => []
    },
    textTop: {
      type: Array,
      default: () => ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
    },
    sundayStart: {
      type: Boolean,
      default: () => true
    },
    agoDayHide: {
      type: String,
      default: `0`
    },
    futureDayHide: {
      type: String,
      default: `2554387200`
    }
  },
  created() {
    this.intStart();
    this.myDate = new Date();
  },
  methods: {

    intStart() {
      timeUtil.sundayStart = this.sundayStart;
    },
    setClass(data) {
      let obj = {};
      obj[data.markClassName] = data.markClassName;
      return obj;
    },
    clickDay: function(item, index) {

      if (item.otherMonth === "nowMonth" && !item.dayHide) {
        //this.getList(this.myDate, item.date);

        for (let i = 0; i < this.list.length; i++) {
          this.list[i].chooseDay = false;
        }
        item.chooseDay = true;
      }
      if (item.otherMonth !== "nowMonth") {


        item.otherMonth === "preMonth" ?
          this.PreMonth(item.date) :
          this.NextMonth(item.date);
      }

      this.$emit('clickDay', item);

    },
    ChoseMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = new Date(date);
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    PreMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    NextMonth: function(date, isChosedDay = true) {
      date = timeUtil.dateFormat(date);
      this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth");
      this.$emit("changeMonth", timeUtil.dateFormat(this.myDate));
      if (isChosedDay) {
        this.getList(this.myDate, date, isChosedDay);
      } else {
        this.getList(this.myDate);
      }
    },
    forMatArgs: function() {
      let markDate = this.markDate;
      let markDateMore = this.markDateMore;
      markDate = markDate.map(k => {
        return timeUtil.dateFormat(k);
      });
      markDateMore = markDateMore.map(k => {
        k.date = timeUtil.dateFormat(k.date);
        return k;
      });
      return [markDate, markDateMore];
    },
    getList: function(date, chooseDay, isChosedDay = true) {



      var _this = this;

      const [markDate, markDateMore] = this.forMatArgs();
      this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`;
      let arr = timeUtil.getMonthList(this.myDate);
      for (let i = 0; i < arr.length; i++) {
        let markClassName = "";
        let k = arr[i];
        k.chooseDay = false;
        const nowTime = k.date;
        const t = new Date(nowTime).getTime() / 1000;
        //看每一天的class
        for (const c of markDateMore) {
          if (c.date === nowTime) {
            markClassName = c.className || "";
          }
        }
        //标记选中某些天 设置class
        k.markClassName = markClassName;
        k.isMark = markDate.indexOf(nowTime) > -1;
        //无法选中某天
        k.dayHide = t < this.agoDayHide || t > this.futureDayHide;
        if (k.isToday) {
          this.$emit("isToday", nowTime);
        }
        let flag = !k.dayHide && k.otherMonth === "nowMonth";
        if (chooseDay && chooseDay === nowTime && flag) {
          this.$emit("choseDay", nowTime);
          this.historyChose.push(nowTime);
          k.chooseDay = true;
        } else if (
          this.historyChose[this.historyChose.length - 1] === nowTime &&
          !chooseDay &&
          flag
        ) {
          k.chooseDay = true;
        }
      }

      _this.list = arr;

      _this.$emit('dataChange', arr);

    },
    reload() {
      this.getList(this.myDate);
    },
    setData(data){
      this.dateMap = data
    }
  },


  mounted() {
    this.getList(this.myDate);
  },
  watch: {
    markDate: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    markDateMore: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    // agoDayHide: {
    //     handler(val, oldVal) {
    //         this.getList(this.myDate);
    //     },
    //     deep: true
    // },
    futureDayHide: {
      handler(val, oldVal) {
        this.getList(this.myDate);
      },
      deep: true
    },
    sundayStart: {
      handler(val, oldVal) {
        this.intStart();
        this.getList(this.myDate);
      },
      deep: true
    }
  }
};

</script>
<style scoped>
.wh_item_date:hover {
  /*border: 1px solid #ffa75f;*/

  background-color: #eef0f3;

  cursor: pointer;
}

/*
li {
  list-style-type: none;
}*/


.wh_top_changge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-basis: auto;
  width: 98%;
  height: 68px; 
  text-align: center;
}

.wh_top_changge button {
  cursor: pointer;
  display: flex;
  color: #606266;
  font-size: 18px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  background-color: #fff;
}


.wh_content_all {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
  /*background-color: #0fc37c;*/
  width: 100%;
  overflow: hidden;
}

.wh_weekday_content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 1%;
}

.wh_weekday_content .wh_content_item {
  font-size: 15px;
  width: 13.4%;
  text-align: center;
  color: #606266;
  position: relative;
  margin: 0px 2px 0px 2px;
}

.wh_content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: calc(100% - 110px);
  padding-left: 1%;
}

.wh_content:first-child .wh_content_item_tag,
.wh_content:first-child .wh_content_item {
  color: #ddd;
  font-size: 16px;
}

.wh_content_item,
.wh_content_item_tag {
  font-size: 15px;
  width: 13.4%;
  text-align: center;
  color: #606266;
  position: relative;
}

.wh_content .wh_content_item {
  /*height: calc(100%/5 -30px);*/
  min-height: 100px;
  /*min-width: 110px;*/
  border-top: 2px solid #e8e8e8;
  margin: 0px 2px 0px 2px;
  cursor: pointer;
}

.wh_content .wh_isToday {
  border-top: 2px solid #53b2ff;
  background: #d7edff;
}

.wh_content .wh_chose_day {
  border-top: 2px solid #ffab66;
  background: #ffedde;
}


.wh_content .wh_day_title {
  font-size: 16px;
  /*font-weight: bold;*/
  text-align: left;
  padding-left: 8px;
  padding-top: 4px;
  /*color: #777;*/
}


.wh_content .wh_other_dayhide .wh_day_title{
  color: #bfbfbf;
}

.wh_content .wh_want_dayhide .wh_day_title{
  color: #bfbfbf;
}


.wh_top_tag {
  width: 40px;
  height: 40px;
  line-height: 40px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wh_item_date {
  /*border: 1px solid #fff;*/
  width: 100%;
  height: 100%;
  line-height: 20px;
  margin: auto;
  /*display: flex;*/
  justify-content: center;
  /*align-items: center;*/
  overflow: hidden;
  /*border: 1px solid #fff;*/
}

.wh_jiantou1 {
  width: 12px;
  height: 12px;
  border-top: 2px solid #606266;
  border-left: 2px solid #606266;
  transform: rotate(-45deg);
}

.wh_jiantou1:active,
.wh_jiantou2:active {
  border-color: #ddd;
}

.wh_jiantou2 {
  width: 12px;
  height: 12px;
  border-top: 2px solid #606266;
  border-right: 2px solid #606266;
  transform: rotate(45deg);
}


.wh-badge-status-red {
  background-color: #f79a9a;
}

.wh-badge-status-orange {
  background-color: orange;
}

.wh-badge-status-blue {
  background-color: #2ed7e4;
}

.wh-badge-status-green {
  background-color: #8aa78a;
}

.wh-badge-status-yellow {
  background-color: yellow;
}

.wh-badge-status-gray {
  background-color: gray;
}

.wh-badge-status-dot {
  position: relative;
  top: -1px;
  display: inline-block;
  width: 6px;
  height: 6px;
  vertical-align: middle;
  border-radius: 50%;
  margin-right: 4px;
  margin-left: 8px;
}

.wh_item_date_attachment {
  text-align: left;
  padding-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
  height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #606266;
  font-size: 12px;
}

</style>
